<template>
  <div  style="position: relative;background-color: #fff;z-index: 10" >
    <a style="float: left;left: 60px;top: 20px;margin: 15px;" href="/"><img  src="../assets/images/logo2.png" alt=""></a>
    <el-menu :default-active="activeIndex" style="float:left;margin-left: 20px" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2-1">学习中心</el-menu-item>
      <el-menu-item index="2-2">招聘</el-menu-item>
      <el-menu-item index="2-3">项目营地</el-menu-item>
      <el-menu-item index="3" >消息中心</el-menu-item>
      <el-menu-item index="4">订单管理</el-menu-item>
    </el-menu>
    <div style="width: 300px;float:left;margin-top: 10PX;left: 800px;position: absolute">
      <el-input placeholder="请输入内容" v-model="input1">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
   <a href="/content/quill">
   <el-button style="width: 80.28px;height: 42px; position: absolute; top: 10px;line-height: 10px;text-align: center; right: 150px; float: right" type="primary" @click="handleSubmit">创作</el-button>
   </a>
   <div style="float: right;margin-top: 10px;right: 10px;position: absolute">
     <el-popover
         placement="top-start"
         width="200"
         trigger="hover">
       <div slot="reference">
       <el-avatar src="https://img0.baidu.com/it/u=1752903520,1572100722&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1687798800&t=34611a8907e664dac0efd0982457d7ec"></el-avatar>
       </div>
       <el-menu
           router
           default-active="/detail"
           class="el-menu-vertical-demo">
         <el-menu-item index="/detail">个人中心</el-menu-item>
         <el-menu-item index="1-2">退出登录</el-menu-item>
       </el-menu>
     </el-popover>
<!--     <el-popover-->
<!--         placement="top-start"-->
<!--         width="200"-->
<!--         trigger="hover">-->
<!--       <div slot="reference" style="text-align: center">-->
<!--         <el-avatar fit="scale-down" size="medium" shape="circle"-->
<!--                    src="">-->
<!--         </el-avatar>-->
<!--       </div>-->
<!--       <el-menu-->
<!--           default-active="2"-->
<!--           class="el-menu-vertical-demo">-->
<!--         <el-menu-item index="1-1">登录</el-menu-item>-->
<!--         <el-menu-item index="1-2">注册</el-menu-item>-->
<!--       </el-menu>-->
<!--     </el-popover>-->
   </div>
 </div>
</template>

<script>
import router from "@/router";

export default {
  name: "Header",
  data:function (){
    return{
      // user:localStorage.user?JSON.parse(localStorage.user):null,
      activeIndex: '1',
      input1:""
    }
  },
  methods:{
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSubmit(){
      router.push("/content/quill")
    }
  },

};
</script>

<style >

.indexHeader img{
 float: left;left: 60px;top: 20px;margin: 15px;
}
.indexHeader .el-menu-demo{
  margin-left: 50px;
  float: left;
}
</style>